<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>News</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/pagination.css">
    <link rel="Shortcut Icon" href="images/icon.png" type="image/x-icon">
    <style>
        .main .box {
            width: 86%;
            margin: 100px auto;
        }
        
        .main .box .item {
            overflow: hidden;
            margin-bottom: 40px;
        }
        
        .main .box .item .times {
            float: left;
            width: 25%;
        }
        
        .main .box .item .times p {
            color: #999;
            font-size: 12px;
        }
        
        .main .box .item .times span {
            margin-top: 10px;
            display: inline-block;
            margin-right: 10px;
            height: 40px;
            line-height: 40px;
        }
        
        .main .box .item .times .month {
            border-top: 3px solid #17b8c6;
        }
        
        .main .box .item .text {
            float: left;
            width: 75%;
        }
        
        .main .box .item .textP {
            height: 154px;
            overflow: hidden;
            font-size: 16px;
        }
        
        .main .box .item .textP p {
            line-height: 30px;
         
        }
        /*按钮样式*/
        
        .main .box .item button {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background: #fab554;
            border-radius: 5px;
            border: none;
            color: #fff;
            float: right;
            margin-top: 20px;
            outline: none;
            margin-right: 20px;
        }
        
        .main .box .item .text h3 {
            text-align: left;
            margin-bottom: 20px;
        }
        
        .main .box .item .text p {
            padding-right: 20px;
            line-height: 30px;
        }
        
        .main .pagination {
            position: relative;
            width: 100%;
            height: 40px;
        }
        
        .main .M-box {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0%);
        }
        
        .hidden {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav">
            <div class="logo"><img src="images/logo_01.png" alt=""></div>
            <ul class="navul">
                <li><a href="index.html">Home</a></li>
                <li><a href="p2.html">About us</a>
                    <ul class="child">
                        <li><a href="p2.html?id=1">Overview</a></li>
                        <li><a href="p2.html?id=2">CEO Message</a></li>
                        <li><a href="p2.html?id=3">Vision and Mission</a></li>
                        <li><a href="p2.html?id=4">Management Team</a></li>
                        <li><a href="p2.html?id=5">Scientific Advisory Board</a></li>
                        <li><a href="p2.html?id=6">Investors</a></li>
                    </ul>
                </li>
                <li>
                    <a href="p3.html">R&D</a>
                    <ul class="child">
                        <li><a href="p3.html">Pipeline</a></li>
                       <!--  <li><a href="p3.html?id=2">Pre-clinical Development</a></li>
                        <li><a href="p3.html?id=3">Clinical & Regulatory</a></li> -->
                        <li><a href="p3.html?id=4">Facility</a></li>

                    </ul>

                </li>
                <li>
                    <a href="p4.html">Partnerships</a>
                    <ul class="child">
                        <li><a href="p4.html">Business Development</a></li>
                        <li><a href="p4.html?id=2">Partners</a></li>
                    </ul>
                </li>
                <li><a href="p5.html"  style="font-weight:bold;font-style: italic;">News</a></li>
                <li>
                    <a href="p6.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="box">
            <div id="box">

            </div>
            <!-- 分页 -->
            <div class="pagination">
                <div class="M-box"></div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <div class="footer_nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="p2.html">About us</a></li>
                <li><a href="p3.html">R&D</a></li>
                <li><a href="p4.html">Partnerships</a></li>
                <li><a href="p5.html" style="font-weight:bold;font-style: italic;">News</a></li>
                <li><a href="p6.html">Contact</a></li>
            </ul>
            <div class="logo"><img src="images/footer_logo.png" alt=""></div>

        </div>
    </div>
    <!-- 版权信息 -->
    <div class="copy">
        <p>Copyright 2018 © EOC Pharma 沪ICP备 17043104号
        </p>
    </div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.pagination.js"></script>
    <script src="js/public.js"></script>
    <script>
        var count = 1;
        // 默认请求
        $.ajax({
            url: siteUrl + '/news/1/5',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.status == true) {
                    if (data.message.data.count % 5 != 0) {
                        count = Math.ceil(data.message.data.count / 5);
                    } else {
                        count = data.message.data.count / 5;
                    }

                    console.log(count)

                    console.log(data)

                    $.each(data.message.data.rows, function(index, item) {
                        var str = encodeURI(item.text);


         //                $("<div class='item'>").html(` 
         //                     	  	 <div class="times">
								 // 		<span class="month">${item.month}</span><span>${item.day}</span>
								 // 		<p>${item.year}</p>
								 // 	</div>
								 // 	<div class="text">
								 // 		<h3>${item.title}</h3>	
								 // 		<div class="textP">			
								 // 			${item.text}
								 // 		</div>	
								 // 	</div>
								 // 		<button onclick="showAll('${item.month}','${item.day}','${item.year}','${item.title}','${str}')">Read more</button>	

								 // </div>                          
	        //              `).appendTo("#box");
                        $("<div class='item'>").html((" \n                                <div class=\"times\">\n <span class=\"month\">" + item.month + "</span><span>" + item.day + "</span>\n <p>" + item.year + "</p>\n </div>\n <div class=\"text\">\n <h3>" + item.title + "</h3>\n <div class=\"textP\">\n " + item.text + "\n </div>\n </div>\n <button onclick=\"showAll('" + item.month + "','" + item.day + "','" + item.year + "','" + item.title + "','" + str + "')\">Read more</button>\n\n </div>                          \n                     ")).appendTo("#box");
 


                    })
                    $('.M-box').pagination({
                        pageCount: count,
                        callback: page

                    });

                } else {
                    alert("发生错误")
                }
            },
            error: function(err) {
                console.log("请求失败" + err)
            }
        })

        function page(api) {
            $("#box").empty();
            $.ajax({
                url: siteUrl + '/news/' + api.getCurrent() + '/5',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.status == true) {
                        $.each(data.message.data.rows, function(index, item) {
                            var str = encodeURI(item.text);

         //                    $("<div class='item'>").html(` 
         //                     	  	 <div class="times">
								 // 		<span class="month">${item.month}</span><span>${item.day}</span>
								 // 		<p>${item.year}</p>
								 // 	</div>
								 // 	<div class="text">
								 // 		<h3>${item.title}</h3>	
								 // 		<div class="textP">			
								 // 			${item.text}
								 // 		</div>
								 // 	</div>
								 // 	<button onclick="showAll('${item.month}','${item.day}','${item.year}','${item.title}','${str}')">Read more</button>	

								 // </div>                    
	        //              	`).appendTo("#box");
              $("<div class='item'>").html((" \n                              <div class=\"times\">\n <span class=\"month\">" + item.month + "</span><span>" + item.day + "</span>\n <p>" + item.year + "</p>\n </div>\n <div class=\"text\">\n <h3>" + item.title + "</h3>\n <div class=\"textP\">\n " + item.text + "\n </div>\n </div>\n <button onclick=\"showAll('" + item.month + "','" + item.day + "','" + item.year + "','" + item.title + "','" + str + "')\">Read more</button>\n\n </div>                    \n                     ")).appendTo("#box");

                        })


                    } else {
                        alert("发生错误")
                    }
                },
                error: function(err) {
                    console.log("请求失败" + err)
                }
            })


        }

        backgroundApi();

        if (GetQueryString("aaa") !== null) {
            var title = localStorage.getItem("title");
            var text = localStorage.getItem("text")
            var day = localStorage.getItem("day")
            var month = localStorage.getItem("month")
            var year = localStorage.getItem("year")

            $(".box").empty();
         //    $("<div class='item'>").html(` 
	        //                     <div class="times">
									//  		<span class="month">${month}</span><span>${day}</span>
								 // 			<p>${year}</p>
									//  	</div>
									//  	<div class="text">
									//  		<h3>${title}</h3>
									//  		<p>${text}</p>
									//  	</div>
								 // </div>                          
	        //              	`).appendTo(".box");
              $("<div class='item'>").html((" \n                           <div class=\"times\">\n <span class=\"month\">" + month + "</span><span>" + day + "</span>\n <p>" + year + "</p>\n </div>\n <div class=\"text\">\n <h3>" + title + "</h3>\n <p>" + text + "</p>\n </div>\n </div>                          \n                     ")).appendTo(".box");
 

        }

        function showAll(month, day, year, title, text) {

            var str = decodeURI(text);




            $(".box").empty();
             $("<div class='item'>").html((" \n                           <div class=\"times\">\n<span class=\"month\">" + month + "</span><span>" + day + "</span>\n<p>" + year + "</p>\n</div>\n<div class=\"text\" style='height:auto'>\n<h3>" + title + "</h3>\n<p>" + str + "</p>\n</div>\n<a href=\"p5.html\"><button>Back</button></a>\n</div>                          \n                    ")).appendTo(".box");
 
         //    $("<div class='item'>").html(` 
	        //                     <div class="times">
									//  		<span class="month">${month}</span><span>${day}</span>
								 // 			<p>${year}</p>
									//  	</div>
									//  	<div class="text" style='height:auto'>
									//  		<h3>${title}</h3>
									//  		<p>${str}</p>
									//  	</div>
									//  	<a href="p5.html"><button>Back</button></a>	
								 // </div>                          
	        //              	`).appendTo(".box");
        }


    </script>



</body>

</html>